<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">
		<view class="posifi zindex5" :style="{paddingTop:shh+'px'}">
			<view @click="back"  class="flex-ju-c mt30 wh70-70 ra100 mt30 ml30 " style="background: rgba(0, 0, 0,0.5);">
				<view  class="" >
					<image mode="widthFix" class="image width32   " src="/static/back.png"></image>
				</view>
			</view>
		</view>
		
		<image style="border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;" mode="widthFix" class="width1000" :src="integralinfo.thumb"></image>
		<view class="con pb300">
			
			
			<view class="flex-ju-c flex-col  mt20 con size35 ">
				<view class="bold">浴火而生的莲花</view>
				<!-- <view class="color999 size24 mt5">已兑换100份</view> -->
			</view>
			
			
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt30">
				<view class="size30 bold">商品规格</view>
				
				<view class="flex-ju-b mt20">
					<view class="color999">规格选择</view>
					<view :class="theme?'color999':'color333'">(默认)经典系列</view>
				</view>
				<view class="flex-ju-b mt20">
					<view class="color999">兑换须知</view>
					<view :class="theme?'color999':'color333'">兑换后不支持退换货</view>
				</view>
				<view class="flex-ju-b mt20">
					<view class="color999">支付方式</view>
					<view :class="theme?'color999':'color333'">积分兑换</view>
				</view>
				<view class="flex  mt20" style="justify-content: space-between;">
					<view class="color999">兑换说明</view>
					<view class="width400">可兑换规格仅供参考，实际库存 以用户兑换情况为准，数据可能 存在延迟，敬请理解。 </view>
				</view>
				
			</view>
			
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt20">
				<view class="size30 bold mb20">商品信息</view>
				<image mode="widthFix" class="image" :src="img"></image>
				<!-- <view class="size30 bold mb20 mt20">购买须知</view>
				<view class="color999">
					<view class="mb30">
						数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。
					</view>
					请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。
				</view> -->
			</view>
			
			
		</view>
		
		<view class="con">
			<view class=" posifi width92vw bottom0 " >
				<view class="ra20 flex-ju-b pg30 bgfff height80"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
					<view class="bold size62  " >
						 {{integralinfo.integral}}<text class="size31">积分</text>
					</view>
					<view @click="navto('order?info='+JSON.stringify(integralinfo))"  class="bold wh330-100 bg000 colorfff ra20 flex-ju-c   size29  ">
						兑换
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- <view class=" posifi width1000 bottom0 hidden ra20" >
			<view class=" flex-a-i pg30" :class="theme?'bg292929 colorfff':'bgfff'" style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
				<image mode="widthFix" class="image" :src="theme?'/static/img/tbutbottom.png':'/static/img/butbottom.png'"></image>
				<view v-if="type==0" class="bold size49  posiab ml30">
					{{integralinfo.integral}}<text class="size28 color000">积分</text>
				</view>
				<view v-else class="bold size49 colorFF6E44 posiab ml30">
					<text class="size28 color000">可获得</text>{{integralinfo.integral}}<text class="size28 color000">积分</text>
				</view>
				<view @click="$refs.tishi.open()" :class="theme?'color000':''" class="bold wh250-100 flex-ju-c flex-col  size29 posiab right50">
					立即兑换
				</view>
			</view>
		</view> -->
	</view>
	
	<uni-popup ref="tishi" type="center">
		<view>
			<image mode="widthFix" class="width555 image" src="/static/tishi.png"></image>
			<view class="bgFFF4E8 width555 pt30" style="border-radius: 0rpx 0rpx 21rpx 21rpx;">
				<view class="bgfff width500 ra20" style="margin: auto;">
					<view class="pg60 size26">
						<view v-if="type==0" class="">
							确认消耗{{integralinfo.integral}}积分 
							<view>兑换该藏品吗？</view>
						</view>
						<view v-else class="">
							兑换后，指定藏品将被销毁
							<view> 此操作不可逆</view>
						</view>
					</view>
				</view>
				<view class="flex-ju-c pb20 mt20">
					<view @click="tabintegral" class="qure flex-ju-c">
						确认
					</view>
				</view>
				<view @click="$refs.tishi.close()" class="size30 bold pb30">取消</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				theme: uni.getStorageSync('theme'),
				integralinfo:{},
				type:""
			}
		},
		onLoad(option) {
			this.img = option.img
			this.type = option.type
			if(option.type==1){
				this.http('exchangeIntegral/'+option.uuid).then(res=>{
					this.integralinfo = res.data
				})
			}else{
				this.http('integralExchange/'+option.uuid).then(res=>{
					this.integralinfo = res.data
				})
			}
		},
		mounted() {
			// this.$refs.tishi.open()
		},
		methods: {
			tabintegral(){
				if(this.type==0){
					this.http('integralExchange',{
						uuid:this.integralinfo.uuid
					},'post').then(res=>{
						this.$refs.tishi.close()
						uni.redirectTo({
							url:"suu?integral="+this.integralinfo.integral+'&type=0'
						})
					})
				}else{
					this.http('exchangeIntegral',{
						uuid:this.integralinfo.uuid
					},'post').then(res=>{
						this.$refs.tishi.close()
						uni.redirectTo({
							url:"suu?integral="+this.integralinfo.integral+'&type=1'
						})
					})
				}
				
			},
		}
	}
</script>

<style>

.qure{
		width: 514rpx;
		height: 104rpx;
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
		border-radius: 52rpx;
	}
</style>
